<template>
  <view class="address-page">
    <!-- 地址列表 -->
    <view class="address-list">
      <view v-for="(address, index) in addressList" :key="index" class="address-item">
        <view class="address-info">
          <text class="name">{{ address.name }}</text>
          <text class="phone">{{ address.phone }}</text>
          <text class="detail">{{ address.detail }}</text>
        </view>
        <view class="address-actions">
          <button class="action-btn edit-btn" @click="openEditPopup(index)">
            <image src="@/pages/my/image/编辑.png"  class="action-icon" /> <!-- 编辑图片 -->
          </button>
          <button class="action-btn delete-btn" @click="deleteAddress(index)">
            <image src="@/pages/my/image/删除.png"  class="action-icon" /> <!-- 删除图片 -->
          </button>
        </view>
      </view>
    </view>

    <!-- 添加地址按钮 -->
    <view class="add-address">
      <button class="add-btn" @click="openAddPopup">
        <text class="iconfont">&#xe608;</text> <!-- 添加图标 -->
        <text>添加新地址</text>
      </button>
    </view>

    <!-- 添加地址弹框 -->
    <uni-popup ref="addPopup" type="dialog">
      <view class="popup-content">
        <view class="popup-header">添加新地址</view>
        <view class="popup-body">
          <input v-model="newAddress.name" placeholder="姓名" />
          <input v-model="newAddress.phone" placeholder="电话" />
          <input v-model="newAddress.detail" placeholder="详细地址" />
        </view>
        <view class="popup-footer">
          <button class="popup-btn cancel-btn" @click="closeAddPopup">取消</button>
          <button class="popup-btn confirm-btn" @click="confirmAddAddress">确认</button>
        </view>
      </view>
    </uni-popup>

    <!-- 编辑地址弹框 -->
    <uni-popup ref="editPopup" type="dialog">
      <view class="popup-content">
        <view class="popup-header">编辑地址</view>
        <view class="popup-body">
          <input v-model="editAddressData.name" placeholder="姓名" />
          <input v-model="editAddressData.phone" placeholder="电话" />
          <input v-model="editAddressData.detail" placeholder="详细地址" />
        </view>
        <view class="popup-footer">
          <button class="popup-btn cancel-btn" @click="closeEditPopup">取消</button>
          <button class="popup-btn confirm-btn" @click="confirmEditAddress">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
  import { ref } from 'vue';

  // 图片地址（预留位置，替换为实际图片地址）
  const editIcon = ref('/static/icons/edit.png'); // 编辑图片地址
  const deleteIcon = ref('/static/icons/delete.png'); // 删除图片地址

  // 地址列表数据（静态数据，接口部分留空）
  const addressList = ref([
    {
      name: '张三',
      phone: '13800138000',
      detail: '北京市朝阳区某某街道'
    },
    {
      name: '李四',
      phone: '13900139000',
      detail: '上海市浦东新区某某街道'
    }
  ]);

  // 添加地址弹框相关
  const addPopup = ref(null);
  const newAddress = ref({
    name: '',
    phone: '',
    detail: ''
  });

  const openAddPopup = () => {
    newAddress.value = { name: '', phone: '', detail: '' }; // 清空表单
    addPopup.value.open();
  };

  const closeAddPopup = () => {
    addPopup.value.close();
  };

  const confirmAddAddress = () => {
    // 这里留空，后续对接接口
    console.log('添加地址数据:', newAddress.value);
    closeAddPopup();
  };

  // 编辑地址弹框相关
  const editPopup = ref(null);
  const editAddressData = ref({
    name: '',
    phone: '',
    detail: ''
  });
  let editIndex = null;

  const openEditPopup = (index) => {
    editIndex = index;
    editAddressData.value = { ...addressList.value[index] }; // 填充表单
    editPopup.value.open();
  };

  const closeEditPopup = () => {
    editPopup.value.close();
  };

  const confirmEditAddress = () => {
    // 这里留空，后续对接接口
    console.log('编辑地址数据:', editAddressData.value);
    closeEditPopup();
  };

  // 删除地址
  const deleteAddress = (index) => {
    // 这里留空，后续对接接口
    console.log('删除地址索引:', index);
  };
</script>

<style scoped>
  .address-page {
    padding: 20px;
    background-color: #f8f8f8;
  }
  
  .address-list {
    margin-bottom: 20px;
  }
  
  .address-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    margin-bottom: 12px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  .address-info {
    flex: 1;
    margin-right: 12px;
  }
  
  .name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
  }
  
  .phone {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
  }
  
  .detail {
    font-size: 14px;
    color: #999;
  }
  
  .address-actions {
    display: flex;
    align-items: center;
    gap: 8px; /* 按钮间距 */
  }
  
  .action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .action-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  
  .edit-btn {
    color: #409eff;
  }
  
  .delete-btn {
    color: #f56c6c;
  }
  
  .action-icon {
    width: 24px;
    height: 24px;
  }
  
  .add-address {
    margin-top: 20px;
  }
  
  .add-btn {
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 图标和文字间距 */
    background-color: transparent;
    border: 1px solid #409eff;
    border-radius: 12px;
    color: #409eff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
  }
  
  .add-btn:hover {
    background-color: #409eff;
    color: #fff;
  }

  /* 弹框样式 */
  .popup-content {
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    width: 300px;
  }
  
  .popup-header {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
    text-align: center;
  }
  
  .popup-body input {
	  height: 40px;
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
  }
  
  .popup-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  
  .popup-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .cancel-btn {
    background-color: #f8f8f8;
    color: #666;
  }
  
  .cancel-btn:hover {
    background-color: #eee;
  }
  
  .confirm-btn {
    background-color: #409eff;
    color: #fff;
  }
  
  .confirm-btn:hover {
    background-color: #66b1ff;
  }
</style>